/*
 * @Description: 首页 -- 点赞/评论
 * @Date: 2020-09-11 14:57:26
 * @Author: 黄治恩
 */

import React, { Component } from 'react'
import { Image  } from 'antd';
import { Link } from 'react-router-dom'

import './style.scss'

interface Props_type {
  item:{id:number,like:number}
}

class HomeOperation extends Component<Props_type>{
  
  state = {
    info:this.props.item
  }

  /**
   * @description 点赞
   * @param {object} evevnt
   * @param {object} info 数据
   */
  onLike(e:any,info:{like:number}){
    e.stopPropagation();
    let {like} = info
    let data = {
      ...info
    }
    data.like = like === 1 ? 2 : 1
    this.setState({info:data})
  }

  render() {
    let { info } = this.state
    return (
      <ul className="sy-home-operation">
        {/* like_active 已点赞 */}
        <li className={`item like ${info.like === 2 ? 'like_active' : ''}`} onClick={(e)=> this.onLike(e,info)}>
          <div >
            {
              info.like === 1
              ?  <Image width={16} height={16} preview={false} src="@/assets/img/operation/like.svg" />
              :  <Image width={16} height={16} src="@/assets/img/operation/like_active.svg" />
            }
            <span className="count">123</span>
          </div>
        </li>
        <li className="item comment">
          <Link to={`/article?id=${info}`} target="_blank" onClick={(e)=>e.stopPropagation()}>
            <Image width={16} height={16} preview={false} src="@/assets/img/operation/comment.svg" />
            <span className="count">23</span>
          </Link>
        </li>
      </ul>
    )
  }
}

export default HomeOperation